<template>
  <div class="icons">
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="iconClick(item.path)">
        <img v-lazy="item.imgUrl">
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { Lazyload } from 'mint-ui';
export default {
  name: "Icons",
  props:{
    dataList:Array
  },
  methods:{
    iconClick(path){
      this.$emit('iconClick',path)
    }
  }
}
</script>

<style scoped lang="scss">
.icons{
  margin-top: 5px;
  background-color: #F4F4F4;
}
ul{
  display: flex;
  flex-wrap: wrap;
  li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 25%;
    img{
      width: 0.8rem;
      height: 0.8rem;
    }
    span{
      font-size: 0.33333rem;
    }
  }
}
</style>